<template>
  <div class="add-car">
    <el-dialog v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      :title="!!editId ? '修改车辆' + (fm.ps.plateNum ? '【' + fm.ps.plateNum + '】' : '') + '' : '添加车辆'"
      :close-on-click-modal="false" :visible.sync="md.state" @close="closeMd" v-if="md.state" :width="'80%'">
      <el-form :model="fm.ps" :ref="fm.fname" :label-width="'100px'" class="demo-form-inline"
        @keyup.enter.native="onSubmit">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="驱动分类" prop="powerSource" :rules="[
              {
                required: true,
                message: '请选择驱动分类',
                trigger: 'change',
              },
            ]">
              <el-select v-model="fm.ps.powerSource" :placeholder="'驱动分类选择'" style="width: 100%">
                <el-option :label="'柴油'" :value="'DIESEL'"></el-option>
                <el-option :label="'汽油'" :value="'GASOLINE'"></el-option>
                <el-option :label="'CNG/LNGX '" :value="'CNGLNG'"></el-option>
                <el-option :label="'新能源'" :value="'NEWENERGY'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="座位数" prop="seats" :rules="[
              { required: true, message: '请填写座位数', trigger: 'change' },
            ]">
              <el-input v-model="fm.ps.seats" placeholder="请输入座位数" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运营性质" prop="serviceType" :rules="[
              {
                required: true,
                message: '请选择运营性质',
                trigger: 'change',
              },
            ]">
              <el-select v-model="fm.ps.serviceType" :placeholder="'运营性质'" style="width: 100%">
                <el-option :label="'县际业务'" :value="'COUNTY_SER'"></el-option>
                <el-option :label="'市际业务'" :value="'CITY_SER'"></el-option>
                <el-option :label="'省际业务'" :value="'PROVINCE_SER'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行  -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="驾照需求" prop="drivingType" :rules="[
              {
                required: true,
                message: '请选择驾照',
                trigger: 'change',
              },
            ]">
              <el-select v-model="fm.ps.drivingType" :placeholder="'驾照选择'" style="width: 100%">
                <el-option :label="'A1'" :value="'A1'"></el-option>
                <el-option :label="'A2'" :value="'A2'"></el-option>
                <el-option :label="'B1 '" :value="'B1'"></el-option>
                <el-option :label="'B2'" :value="'B2'"></el-option>
                <el-option :label="'C1'" :value="'C1'"></el-option>
                <el-option :label="'C2'" :value="'C2'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否上网" prop="isInternet" :rules="[
              { required: true, message: '请选择', trigger: 'change' },
            ]">
              <el-select v-model="fm.ps.isInternet" :placeholder="'请选择是否上网'" style="width: 100%">
                <el-option :label="'上网车'" :value="'0'"></el-option>
                <el-option :label="'非上网车'" :value="'1'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="车辆颜色" prop="carColors" :rules="[
              {
                required: true,
                message: '请选择车辆颜色',
                trigger: 'change',
              },
            ]">
              <el-select style="width: 100%" v-model="fm.ps.carColors" :placeholder="'车辆颜色选择'" multiple>
                <el-option :label="'红色'" :value="'红色'"></el-option>
                <el-option :label="'黄色'" :value="'黄色'"></el-option>
                <el-option :label="'绿色'" :value="'绿色'"></el-option>
                <el-option :label="'蓝色'" :value="'蓝色'"></el-option>
                <el-option :label="'白色'" :value="'白色'"></el-option>
                <el-option :label="'紫色'" :value="'紫色'"></el-option>
                <el-option :label="'黑色'" :value="'黑色'"></el-option>
                <el-option :label="'金色'" :value="'金色'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- c车牌号 第3行-->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="停靠位置" prop="dockedAddress" :rules="[
              {
                required: true,
                message: '请选择驾照',
                trigger: 'change',
              },
            ]">
              <el-input v-model="fm.ps.dockedAddress" placeholder="请选择停靠位置" @focus="showMap"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="停靠方位" prop="direction" :rules="[
              {
                required: true,
                message: '请选择停靠方位',
                trigger: 'change',
              },
            ]">
              <el-select v-model="fm.ps.direction" :placeholder="'请选择停靠方位'" style="width: 100%">
                <el-option :label="'东'" :value="'东'"></el-option>
                <el-option :label="'西'" :value="'西'"></el-option>
                <el-option :label="'南'" :value="'南'"></el-option>
                <el-option :label="'北'" :value="'北'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="停靠简称" prop="simpleDockedAddress" :rules="[
              {
                required: true,
                message: '请填写停靠简称',
                trigger: 'change',
              },
            ]">
              <el-input style="width: 100%" v-model="fm.ps.simpleDockedAddress" :placeholder="'请填写停靠简称'">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- c车牌号 第4行-->
        <el-row :gutter="10" v-if="!editId">
          <el-col :span="8">
            <el-form-item label="车牌城市" prop="cityId" style="margin-bottom: 0" :rules="[
              {
                required: true,
                message: '请选择车牌所属城市',
                trigger: 'change',
              },
            ]">
              <el-select v-model="fm.ps.cityId" clearable filterable placeholder="车牌所属城市" style="width: 100%"
                :disabled="!!editId">
                <el-option v-for="(it, index) in cityList" :key="index + 'info'" :label="it.cityName" :value="it.id"
                  @click.native="selectCtiy(it.id)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="车牌简称" prop="plateNumShort" style="margin-bottom: 0" :rules="[
              {
                required: true,
                message: '请输入车牌所属地简称',
                trigger: 'change',
              },
            ]">
              <el-select v-model="fm.ps.plateNumShort" :placeholder="'车牌所属地简称'" style="width: 100%" :disabled="!!editId">
                <el-option v-for="(it, index) in plateNumShortList" :key="index + 'info'" :label="it.val"
                  :value="it.val"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="车牌号" prop="plateNum" style="margin-bottom: 0" :rules="[
              {
                required: true,
                message: '请输入车牌号',
                trigger: 'change',
              },
            ]">
              <el-input v-model="fm.ps.plateNum" placeholder="请输入车牌号" :maxlength="carNumberLength == 0 ? 5 : 6"
                :disabled="!!editId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第5行 -->
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="8">
            <el-form-item label="车辆分类" prop="vehicleType" :rules="[
              {
                required: true,
                message: '请选择车辆分类',
                trigger: 'change',
              },
            ]">
              <el-select v-model="fm.ps.vehicleType" :placeholder="'车辆类型选择'" @change="selectCarType" style="width: 100%">
                <el-option :label="'大巴车'" :value="'BUS'"></el-option>
                <el-option :label="'中巴车'" :value="'MINIBUS'"></el-option>
                <el-option :label="'商务车'" :value="'MPV'"></el-option>
                <el-option :label="'越野车'" :value="'SUV'"></el-option>
                <el-option :label="'轿车'" :value="'CAR'"></el-option>
                <el-option :label="'保姆车'" :value="'BMPV'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="车辆品牌" prop="brandId">
              <el-select v-model="fm.ps.brandId" clearable filterable placeholder="车辆品牌选择" style="width: 100%">
                <el-option v-for="it in carBrandList" :key="it.id" :label="it.brandName" :value="it.id"
                  @click.native="handleSign(it)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="车辆子品牌" prop="trainId">
              <el-select v-model="fm.ps.trainId" clearable filterable placeholder="车辆品牌选择" style="width: 100%">
                <el-option v-for="it in carChildBrandList" :key="it.id" :label="it.trainName" :value="it.id"
                  @click.native="handleSignClid(it)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="3">
            <el-button type="primary" @click="addSign">添加品牌</el-button>
          </el-col> -->
        </el-row>

        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="8">
            <el-form-item label="所属部门" prop="deptIds" :rules="[
              {
                required: true,
                message: '请选择所属部门',
                trigger: 'change',
              },
            ]">
              <SelTeamGroup :isMult="false" :isSelAny="true" :defval="fm.ps.deptIds" :width="370"
                @selItem="getSeledTeamGroup"></SelTeamGroup>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="oilBurn" label="车辆油耗" :rules="[
              {
                required: true,
                message: '请填写车辆油耗',
                trigger: ['change', 'blur']
              },
              {
                message: '车辆油耗格式错误',
                validator: validateMoney,
                trigger: ['change', 'blur']
              }
            ]">
              <el-input placeholder="请填写车辆油耗" v-model="fm.ps.oilBurn" :maxlength="6"
                oninput="value=value.replace(/[^0-9.]/g,'')">
                <template slot="append">百公里/升</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 选填项目 -->
        <div style="margin-left: 100px; margin-bottom: 10px">
          <el-button type="primary" @click="handleNotMust" :disabled="fm.sb.load">选填项目</el-button>
        </div>
        <div v-if="hasNotMust">
          <!--  第一行 -->
          <el-row style="margin-top: 10px">
            <el-col :span="8">
              <el-form-item prop="purchaseDate" label="上户日期">
                <el-date-picker v-model="fm.ps.purchaseDate" type="date" placeholder="上户日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="ownPurchaseDate" label="购买日期">
                <el-date-picker v-model="fm.ps.ownPurchaseDate" type="date" placeholder="购买日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="挂靠公司" prop="customId">
                <el-select v-model="fm.ps.customId" clearable filterable placeholder="挂靠公司选择" style="width: 100%">
                  <el-option v-for="it in customList" :key="it.id" :label="it.unitName" :value="it.id"
                    @click.native="handleCustomList(it.id)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 2 -->
          <el-row>
            <el-col :span="8">
              <el-form-item prop="inspectDate" label="年审日期">
                <el-date-picker v-model="fm.ps.inspectDate" type="date" placeholder="年审日期" style="width: 150px"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最大续航" prop="mileage">
                <el-input type="text" placeholder="请输入续航数" v-model="fm.ps.mileage" max="500000" min="1">
                  <template slot="append">公里</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆估值" prop="carValued">
                <el-input type="number" placeholder="请输入车辆价值" v-model="fm.ps.carValued">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 3 -->
          <el-row>
            <el-col :span="8">
              <el-form-item prop="carLength" label="车辆长" style="margin-bottom: 0">
                <el-input placeholder="请填写长度" v-model="composeData.carL">
                  <template slot="append">厘米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="carWidth" label="车辆宽" style="margin-bottom: 0">
                <el-input placeholder="请填写宽度" v-model="composeData.carW">
                  <template slot="append">厘米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="carHeight" label="车辆高" style="margin-bottom: 0">
                <el-input placeholder="请填写高度" v-model="composeData.carH">
                  <template slot="append">厘米</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 4 -->
          <el-row style="margin-top: 10px">
            <el-col :span="8">
              <el-form-item prop="notRunningArea" label="禁行区域省" style="margin-bottom: 0">
                <el-select v-model="composeData.notRunningAreaCity" clearable filterable placeholder="请选择省市"
                  style="width: 100%">
                  <el-option v-for="(it, index) in cityList" :key="index + new Date()" :label="it.provinceName"
                    :value="it.provinceName" @click.native="handleSelectCity(it.provinceCode)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="禁行区域市" prop="notRunningAreaArea" style="margin-bottom: 0">
                <el-select v-model="composeData.notRunningAreaArea" clearable filterable placeholder="请选择省市"
                  style="width: 100%">
                  <el-option v-for="(it, index) in areaList" :key="index + new Date()" :label="it.cityName"
                    :value="it.cityName" @click.native="handleSelectArea(it.cityCode)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="notRunningAreaName" label="禁行区域区">
                <el-select v-model="composeData.notRunningAreaName" clearable filterable placeholder="请选择区"
                  style="width: 100%">
                  <el-option v-for="(it, index) in areaNameList" :key="index + 'info'" :label="it.countyName"
                    :value="it.countyName"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 5 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="carLength" label="行李箱个数">
                <el-input placeholder="请填写个数" v-model="fm.ps.carTrunkCount">
                  <template slot="append">个</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="boxlength" label="行李箱长" style="margin-bottom: 0">
                <el-input placeholder="请填写行李箱长度" v-model="composeData.boxL">
                  <template slot="append">厘米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="boxWidth" label="行李箱宽" style="margin-bottom: 0">
                <el-input placeholder="请填写行李箱宽度" v-model="composeData.boxW">
                  <template slot="append">厘米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="boxHeight" label="行李箱高" style="margin-bottom: 0">
                <el-input placeholder="请填写行李箱高度" v-model="composeData.boxH">
                  <template slot="append">厘米</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 6 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="carLength" label="途强imei号">
                <el-input placeholder="请填写途强imei号" v-model="fm.ps.tuqiangImei">

                </el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item prop="walkFrontImg" label="行驶证" style="margin-bottom: 0">
                <UploadImg :imgName="'walkFrontImg'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :ps="{ userName: uname }" :src="fileBaseUrl + composeData.walkFrontImg" :tiptext="'（正面）'" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="walkBackImg" style="margin-bottom: 0">
                <UploadImg :imgName="'walkBackImg'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :ps="{ userName: uname }" :src="fileBaseUrl + composeData.walkBackImg" :tiptext="'（反面）'" />
              </el-form-item>
            </el-col>
          </el-row>

          <!--  第二行 -->
          <el-row style="margin-top: 10px">
            <el-col :span="5">
              <el-form-item prop="walkFrontImg" label="运营证" style="margin-bottom: 0">
                <UploadImg :imgName="'operaFrontImg'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :ps="{ userName: uname }" :src="fileBaseUrl + composeData.operaFrontImg" :tiptext="'（正面）'" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="walkBackImg" style="margin-bottom: 0">
                <UploadImg :imgName="'operaBackImg'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :ps="{ userName: uname }" :src="fileBaseUrl + composeData.operaBackImg" :tiptext="'（反面）'" />
              </el-form-item>
            </el-col>
          </el-row>
          <!--  第三行  -->
          <el-row style="margin-top: 10px">
            <el-col :span="5">
              <el-form-item prop="carOutImg1" label="车辆外观" style="margin-bottom: 0">
                <UploadImg :imgName="'carOutImg1'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :ps="{ userName: uname }" :src="composeData.carOutImg1" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="carOutImg2" style="margin-bottom: 0">
                <UploadImg :imgName="'carOutImg2'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :src="fileBaseUrl + composeData.carOutImg2" :ps="{ userName: uname }" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="carOutImg3" label="" style="margin-bottom: 0">
                <UploadImg :imgName="'carOutImg3'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :ps="{ userName: uname }" :src="fileBaseUrl + composeData.carOutImg3" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第四行 -->
          <el-row style="margin-top: 10px">
            <el-col :span="5">
              <el-form-item prop="carInImg1" label="车辆内饰" style="margin-bottom: 0">
                <UploadImg :imgName="'carInImg1'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :src="fileBaseUrl + composeData.carInImg1" :ps="{ userName: uname }" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="carInImg2" style="margin-bottom: 0">
                <UploadImg :imgName="'carInImg2'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :src="fileBaseUrl + composeData.carInImg2" :ps="{ userName: uname }" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="carInImg3" label="" style="margin-bottom: 0">
                <UploadImg :imgName="'carInImg3'" @getImgUrl="setImgUrl" :url="'/company/upload'"
                  :src="fileBaseUrl + composeData.carInImg3" :ps="{ userName: uname }" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 最后一行 -->
        </div>

        <el-col>
          <el-form-item style="margin-top: 10px">
            <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{ fm.sb.text }}</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
    <TpAmap style="height: 400px" v-if="isShowMap" :state="isShowMap" @getMdState="getAmapState"
      @getMapData="getMapData" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from "moment";
import elDragDialog from "@/directive/el-drag-dialog";
import SelTeamGroup from '@/components/SelTeamGroup';
import UploadImg from "@/components/UploadImg";
import TpAmap from "@/views/tpls/tp-amap";
import * as commonService from "@/api/services/common.service";
import {
  addCarListData,
  getCompanyCusIsDependData,
  getSinglevehicleFindById,
  getSinglevehicleFindUpdate,
} from "@/api/services/logistics.service";
export default {
  name: "AddCar",
  directives: { elDragDialog },
  props: ["state", "editId"],
  components: { SelTeamGroup, UploadImg, TpAmap },
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },
  data() {
    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,
      isShowMap: false,
      md: { state: this.state },
      carNumberLength: 0,
      editObj: this.editArr,
      otrainId: "", // 车辆子品牌
      obrandId: "", // 车辆品牌
      fm: {
        fname: "addCarFm",
        sb: { load: false, text: "立即添加" },
        ps: {
          cityId: "",
          carValued: "", //车辆估值
          mileage: "", // 最大续航数
          yearCheckDate: "", //运营证年审日期
          powerSource: "", // 驱动分类
          seats: "", // 座位数
          serviceType: "", // 运营性质
          drivingType: "", // 驾照需求
          isInternet: "", // 是否上网；
          carColors: [], // 车辆颜色
          direction: "", // 停靠方向
          dockedAddress: "", // 停靠位置 全称
          purchaseDate: "", //行驶证上的购买日期  上户日期
          plateNumShort: "", // 车牌所属地简称
          carTrunkCount: "", // 行李箱个数
          carLwh: "", // 车辆长宽高
          carTrunkLwh: "", // 行李箱长宽高
          tuqiangImei:'', // 途强imei号
          plateNum: "", // 车牌号
          dockedAddress: "", // 停靠位置全称
          simpleDockedAddress: "", // 停靠位置全称
          dockedLatLon: "", // 停靠位置经纬度
          licensePhotoUrl: "", // 行驶证正方面
          operationPhotoUrl: "", // 运营证正方面carPhotoUrl
          carPhotoUrl: "", // 车辆外观
          carInterUrl: "", // 车辆内饰

          vehicleType: "",
          brandId: "", // 车辆品牌
          trainId: "", // 车辆子品牌
          deptIds: [], // 所属部门
          notRunningArea: "", // 禁行区域
          customId: "", //  挂靠公司
          inspectDate: "", // 年审日期
          ownPurchaseDate: "", // 行驶证购买日期
          oilBurn: '', // 百公里油耗（百公里/升）
        },
        xs: { isShow: false },
      },
      /*-----自定义表单验证--begin----*/

      /** 验证-身份证号码 */
      valIdCard: (rule, value, callback) => {
        if (value && value !== "" && !this.FV.isIdCard(value)) {
          callback(new Error(this.FV.ERROR_ID_CARD));
        } else {
          callback();
        }
      },
      /*-----自定义表单验证--end------*/

      cityList: [], // 城市列表
      plateNumShortList: [], // 车牌城市代码列表

      carBrandList: [], // 车辆品牌列表
      carChildBrandList: [], // 车辆品牌列表
      // 挂靠公司
      customList: [],
      areaList: [], // 市
      cityList: [], // 省
      areaNameList: [], // 区
      composeData: {
        notRunningAreaArea: "", // 市
        notRunningAreaName: "", // 区
        notRunningAreaCity: "", // 省
        walkFrontImg: "",
        walkBackImg: "",
        operaFrontImg: "", // 运营证正
        operaBackImg: "", // 运营证 反
        carInImg1: "", // 车辆内饰 图片1 ；
        carInImg2: "", // 车辆内饰 图片1 ；
        carInImg3: "", // 车辆内饰 图片1 ；
        carOutImg1: "",
        carOutImg2: "",
        carOutImg3: "",
        carL: "",
        carW: "",
        carH: "",
        boxL: "",
        boxW: "",
        boxH: "",
      },
      hasNotMust: false,
      customId: null,
    };
  },
  watch: {
    "fm.ps.powerSource": function (newVal) {
      console.log(newVal, "this.ps.powerSource");
      if (newVal == "NEWENERGY") {
        this.carNumberLength = 1;
      }
    },
  },
  created() {
    const that = this;
    that.getCitys();
    if (!!this.editId) {// 修改
      this.fm.sb.text = '立即修改';
      this.getEditData();
    }
  },
  methods: {
    // 金额验证
    validateMoney(rule, value, callback) {
      let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      if (!reg.test(value)) {
        return callback(new Error('请输入正确格式'))
      } else {
        callback();
      }
    },
    // 挂靠客户
    handleCustomList(id) {
      console.log(id, "iddddddd");
      this.customId = id;
    },
    //处理联合字段
    handleAndWords(arr, strArr) {
      if (arr) {
        if (arr[0]) {
          this.composeData[strArr[0]] = arr[0];
        }
        if (arr[1]) {
          this.composeData[strArr[1]] = arr[1];
        }
        if (arr[2]) {
          this.composeData[strArr[2]] = arr[2];
        }
      }
    },
    // 颜色选择
    handleColorSelct(ItemColor) {
      // console.log(ItemColor, "ItemColor");
      // const len = this.fm.ps.carColors.length;
      // if (len < 3) {
      //   return false;
      // }
      // // this.fm.ps.carColors = ItemColor.join(",");
      // console.log(this.fm.ps.carColors, "carcolors");
    },
    // 获取编辑数据
    getEditData() {
      getSinglevehicleFindById({ id: this.editId || "" }).then((res) => {
        console.log(res, "resssss ednitd");
        const {
          carTrunkLwh = "",
          carLwh = "",
          licensePhotoUrl = "",
          operationPhotoUrl = "",
          carPhotoUrl = "",
          carInterUrl = "",
        } = res.data;
        const boxLwhArr = carTrunkLwh && carTrunkLwh.split(",");
        const carLwhArr = carLwh && carLwh.split(",");
        const licensePhotoArr = licensePhotoUrl && licensePhotoUrl.split(",");
        const operationPhotoUrlArr =
          operationPhotoUrl && operationPhotoUrl.split(",");
        const carPhotoUrlArr = carPhotoUrl && carPhotoUrl.split(",");
        const carInterUrllArr = carInterUrl && carInterUrl.split(",");
        const allArr = [
          carLwhArr,
          boxLwhArr,
          carInterUrllArr,
          carPhotoUrlArr,
          licensePhotoArr,
          operationPhotoUrlArr,
        ];
        const textArr = [
          ["carL", "carW", "carH"],
          ["boxL", "boxW", "boxH"],
          ["carInImg1", "carInImg2", "carInImg3"],
          ["carOutImg1", "carOutImg2", "carOutImg3"],
          ["walkFrontImg", "walkBackImg"],
          ["operaFrontImg", "operaBackImg"],
        ];
        for (let i = 0; i < allArr.length; i++) {
          this.handleAndWords(allArr[i], textArr[i]);
        }
        this.getCustomData();
        this.getProvinceListsa();
        this.hasNotMust = true;
        if (res.data.notRunningArea) {
          const arrNotAraa = res.data.notRunningArea.split(",");
          this.composeData.notRunningAreaCity = arrNotAraa[0];
          this.composeData.notRunningAreaArea = arrNotAraa[1];
          this.composeData.notRunningAreaName = arrNotAraa[2];
        }
        if (!!this.editId) {
          this.customId = res.data.customId?.id || "";
        }
        res.data.carColor = res.data && res.data.carColor.slice(1, res.data && res.data.carColor.length - 1).split(",");
        // 颜色赋值
        if (res.data.carColor) {
          res.data.carColors = res.data.carColor;
        } else {
          res.data.carColors = [];
        }
        let o = res.data || {};
        // 请求结果赋值给表单
        this.fm.ps = this.U.scopy(o);

        this.fm.ps.isInternet = String(o.isInternet);
        this.fm.ps.customId = o.customId?.id;
        if (o.carTrainId) {
          this.fm.ps.brandId = o.carTrainId.carBrandId;
          this.fm.ps.trainId = o.carTrainId.id;
        } else {
          this.fm.ps.brandId = '';
          this.fm.ps.trainId = '';
        }
        console.log('传入的回填数据对象', o);
        if (o.dept) {// 设置部门
          console.log(3);
          this.fm.ps.deptIds = [o.dept.id];
        } else {
          this.fm.ps.deptIds = [];
        }
        this.selectCarType(o.vehicleType);
        this.handleSign(o.trainId);

        console.log('回填表单参数对象', this.fm.ps);
      });
    },
    /**
     * 打开-高德地图模板-弹框
     */
    showMap() {
      this.isShowMap = true;
    },
    getMapData(e) {
      if (!e) return;
      const { address, lng, lat } = e;
      this.fm.ps.dockedAddress = address;
      this.fm.ps.dockedLatLon = `${lng},${lat}`;
      this.isShowMap = false;
    },
    getAmapState(e) {
      this.isShowMap = e;
    },
    // 获取省
    getProvinceListsa() {
      commonService.getProvinceList({}).then((res) => {
        console.log(res, "ressssssasgetProvinceList");
        if (res.code == 1) {
          this.cityList = res.data;
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    //选择市
    handleSelectCity(val) {
      commonService.getCityList({ province: val }).then((res) => {
        console.log(res, "ressssssaareaList");
        if (res.code == 1) {
          this.areaList = res.data;
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    // 选择区
    handleSelectArea(val) {
      commonService.getCountyList({ city: val }).then((res) => {
        console.log(res, "ressssssaareaList");
        if (res.code == 1) {
          this.areaNameList = res.data;
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    // 选填项目
    handleNotMust() {
      this.hasNotMust = !this.hasNotMust;
      if (this.hasNotMust) {
        this.getCustomData();
        this.getProvinceListsa();
      }
    },
    //
    /**
     * 挂靠关系 -获取用户
     */
    getCustomData() {
      getCompanyCusIsDependData({ unitNum: this.lunitNum }).then((res) => {
        console.log(res, " 客户数据的获取");
        const { data = [] } = res;
        if (res.code == 1) {
          this.customList = data;
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    // 添加品牌
    addSign() { },
    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdaaState", false);
    },
    /**
     * 获取-城市列表
     */
    getCitys() {
      const that = this;
      commonService.getCitys({}).then((res) => {
        if (res && res.code == 1) {
          that.cityList = res.data;
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    /**
     * 选择城市-获取-城市车牌简写列表
     * @param val 城市id
     */
    selectCtiy(val) {
      const that = this;

      commonService.getPlateNumShort({ id: val }).then((res) => {
        if (res && res.code == 1) {
          console.log(res.data, "data");
          that.plateNumShortList = res.data;
          this.fm.ps.plateNumShort = res.data[0].val;
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    /**
     * 选择车辆类型-获取-对应类型车辆品牌列表
     * @param val 车辆类型
     */
    selectCarType(val) {
      const that = this;

      commonService.getCarBrandList({ carType: val }).then((res) => {
        if (res && res.code == 1) {
          that.carBrandList = res.data;
          // 清空之前所选品牌
          // that.fm.ps.brandId = "";
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    // 车辆品牌
    handleSign(val) {
      const that = this;

      if (val) {
        this.obrandId = val.id;
        commonService.getCarTrainsByCarBrand({ carbrandId: val.id, page: 1, rows: 9999 }).then((res) => {
          if (res && res.code == 1) {
            that.carChildBrandList = res.data;
            // 清空之前所选品牌
            // that.fm.ps.trainId = "";
          } else {
            that.U.qsuccess(res.msg);
          }
        });
      }
    },
    // 车辆子品牌
    handleSignClid(it) {
      console.log(it);
      this.otrainId = it.id;
      this.fm.ps.trainId = it.trainName;
    },
    // 所属部门选择
    getSeledTeamGroup(e) {
      this.U.setFmArr(this.fm.ps.deptIds, e.val);
    },

    /**
     * 设置-图片url
     * @param e 上传成功后的服务器图片url
     */
    setImgUrl(e) {
      console.log(e, " upload img");
      this.composeData[e.name] = e.url;

      const {
        walkFrontImg,
        walkBackImg,
        operaFrontImg,
        operaBackImg,
        carOutImg1,
        carOutImg2,
        carOutImg3,
        carInImg1,
        carInImg2,
        carInImg3,
      } = this.composeData;
      //行驶证
      const img1 = `${walkFrontImg},${walkBackImg}`;
      //运营证
      const img2 = `${operaFrontImg},${operaBackImg}`;
      // 车辆外观
      const img3 = `${carOutImg1},${carOutImg2},${carOutImg3}`;
      // 车辆内饰
      const img4 = `${carInImg1},${carInImg2},${carInImg3}`;

      this.fm.ps.licensePhotoUrl = img1;
      this.fm.ps.operationPhotoUrl = img2;
      this.fm.ps.carPhotoUrl = img3;
      this.fm.ps.carInterUrl = img4;

      if (e.url) {
        this.clearFileValText(e.name);
      } else {
        this.$refs[this.fm.fname].validateField(e.name);
      }
    },
    /**
     * 提交表单
     */
    onSubmit() {
      const that = this, U = that.U, ps = U.scopy(that.fm.ps);
      console.log('添加车辆-提交参数', ps);

      that.$refs[that.fm.fname].validate((valid) => {
        if (!valid) {
          U.qerror("验证不通过");
          return false;
        } else {
          if (Array.isArray(ps.carColors) && ps.carColors.length > 2) {
            U.qerror("最多只能选择两个颜色");
            return false;
          } else {
            ps.carColor = '[' + ps.carColors.join(',') + ']';
          }

          that.fm.sb.load = true; // 添加按钮禁用效果
          let loading = U.qloading("提交中，请稍后..."); // 添加遮罩

          // 添加固定参数
          ps.seats = Number(ps.seats);
          ps.unitNum = that.lunitNum;

          if (that.hasNotMust) {
            // 如果有选填项目
            const {
              carL,
              carW,
              carH,
              boxL,
              boxW,
              boxH,
              notRunningAreaCity,
              notRunningAreaArea,
              notRunningAreaName,
            } = that.composeData;
            // 车辆长宽高
            const ch = `${carL},${carW},${carH}`;
            const bh = `${boxL},${boxW},${boxH}`;
            ps.carLwh = ch;
            ps.carTrunkLwh = bh;
            ps.notRunningArea = `${notRunningAreaCity},${notRunningAreaArea},${notRunningAreaName}`;
            function handleDate(val) { return moment(val).format("YYYY-MM-DD"); }

            ps.ownPurchaseDate = ps.ownPurchaseDate && handleDate(ps.ownPurchaseDate);
            ps.purchaseDate = ps.purchaseDate && handleDate(ps.purchaseDate);
            ps.yearCheckDate = ps.yearCheckDate && handleDate(ps.yearCheckDate);
            ps.inspectDate = ps.inspectDate && handleDate(ps.inspectDate);
          }
          ps.brandId = that.obrandId;
          ps.trainId = that.otrainId;
          const fet = !!that.editId ? getSinglevehicleFindUpdate : addCarListData;
          ps.customId = that.customId || "";
          if (!that.editId) ps.plateNum = `${ps.plateNumShort}${ps.plateNum}`;

          // 处理权限部门参数
          ps.deptAu = ps.deptIds.join(',');
          const pd = !!that.editId ? { ...ps, carId: that.editId } : ps;
          fet(pd).then((res) => {
            that.fm.sb.load = false; // 取消按钮禁用效果
            U.qclose(loading); // 关闭遮罩

            if (!res || res.code != 1) {
              U.qerror(res.msg);
            } else {
              U.qsuccess(res.msg);

              // 关闭弹框
              that.closeMd();

              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            }
          });

          setTimeout(function () {
            that.fm.sb.load = false;
            U.qclose(loading);
          }, 10000);
        }
      });
    },
    // 重置表单
    resetForm() {
      this.$refs[this.fm.fname].resetFields();
    },
    /**
     * 清除某个字段的验证信息
     * @param filed 字段名
     */
    clearFileValText(filed) {
      /*当然，你可以打印一下fields*/
      let _field = this.$refs[this.fm.fname].fields;
      _field.map((i) => {
        // 通过prop属性值相同来判断是哪个输入框，比如：要移除prop为'user'
        if (i.prop === filed) {
          // 清除验证信息
          i.clearValidate();

          return false;
        }
      });
    },
    // 验证-手机号是否存在
    checkCustomPhone(rule, value, callback) {
      let that = this;

      if (!value) {
        callback(new Error("请输入客户电话"));
      } else if (!that.FV.isPhone(value)) {
        callback(new Error("手机号为11位数字"));
      } else {
        ckCustomPhone({ phone: value }).then((res) => {
          if (res.code === 1) {
            that.fm.sb.load = true;

            callback();
          } else {
            that.fm.sb.load = false;

            callback(new Error(res.msg));
          }
        });
      }
    },
    /**
     * 输入姓名自动默认公司名称
     * @param name
     */
    fillCompany(name) {
      let that = this;

      if (that.fm.ps.baseUserId.realName) {
        that.fm.ps.unitName = that.fm.ps.baseUserId.realName + "的公司";
      }
    },
  },
};
</script>
